<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="ext-4.2.1.883/resources/css/ext-all.css">
    <script type="text/javascript" src="ext-4.2.1.883/ext-all.js"></script>
    <script type="text/javascript" src="ext-4.2.1.883/locale/ext-lang-zh_CN.js"></script>
</head>
<body>


<script type="text/javascript">
    /**
     * 创立model
     */
    Ext.define('User', {
        extend: 'Ext.data.Model',
        fields: [
            {name: 'name', type: 'string'},
            {name: 'email', type: 'string'},
            {name: 'phone', type: 'string'}
        ]
    });

    var myStore = Ext.create('Ext.data.Store', {
        model: 'User',
        storeId: 'simpsonsStore',
        proxy: {
            type: 'ajax',
            url: 'user.json',
            reader: {
                type: 'json',
                root: 'users'
            }
        },
        autoLoad: true
    });

    /**
     * 创建grid
     */
    Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        store: Ext.data.StoreManager.lookup('simpsonsStore'),
        columns: [
            {header: 'Name', dataIndex: 'name', field: 'textfield'},
            {
                header: 'Email', dataIndex: 'email', flex: 1,
                field: {
                    xtype: 'textfield',
                    allowBlank: false
                }
            },
            {header: 'Phone', dataIndex: 'phone'}
        ],
        selType: 'rowmodel',
        plugins: [
            Ext.create('Ext.grid.plugin.RowEditing', {
                clicksToEdit: 1
            })
        ],
        height: 200,
        width: 400,
        renderTo: Ext.getBody()
    });


</script>

</body>
</html>